<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 扩展图标库 -->
    <link rel="stylesheet" href="../mui/hello-mui/css/icons-extra.css" type="text/css">
    <!-- de-css -->
    <link rel="stylesheet" href="../dece/css/de-css.css">
    
    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        /*空购物车样式*/
        .empty_cart {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;
        }
        .empty_cart img {
            width: 140px;
            height: 140px;
            margin: 40px 0 20px 0;
        }
        .empty_cart span {
            font-size: 19px;
            color: #999;
            margin: 0px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">购物车</h1>
        </header>
        
        <div v-if="goods_list.length > 0" class="mui-content" style="padding-top: 44px;">
            <div class="de-cart">

                <div v-for="(row, key) in goods_list" class="de-cart-row">
                    <div class="de-cart-head">
                        <div>
                            <div class="de-checkbox">
                                <!-- <template>
                                    <el-checkbox v-model="checked"></el-checkbox>
                                </template> -->
                            </div>
                            <img src="../mui/hello-mui/images/yuantiao.jpg">
                            <span>天猫旗舰店</span>  
                        </div>
                        <div>
                            <span @click="del_goods(row.id, key, row.real_price)">删除</span> 
                        </div>
                    </div>
                    <div class="de-cart-body">
                        <div class="de-cart-check">
                            <div class="de-checkbox">
                                <!-- <template>
                                    <el-checkbox v-model="checked"></el-checkbox>
                                </template> -->
                            </div>
                        </div>
                        <div class="de-cart-img">
                            <img :src="api_host + row.images">
                        </div>
                        <div class="de-cart-goods">
                            <div><span>{{row.goods_name}}</span></div>
                            <div v-if="row.is_spe == 1">超级特惠</div>
                            <div v-if="row.is_hot == 1">热销商品</div>
                            <div v-if="row.is_new == 1">新品上市</div>
                            <label>商品单价￥{{row.special_price}}</label>
                        </div>
                    </div>
                    <div class="de-cart-foot">
                        <div class="de-cart-no"></div>
                        <div class="de-cart-price">
                            <span>￥{{row.real_price}}</span>
                            <div>
                                <a @click="save_car(row.id, -1, row.number)"> - </a>
                                <input type="number" name="goods_num" disabled="disabled" :value="row.number">
                                <a @click="save_car(row.id, 1, row.number)"> + </a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div style="height: 60px;"></div>
            <!-- 购物车结算按钮 -->
            <div class="de-cart-pay">
                <div class="de-checkbox" style="padding-left: 15px;">
                    <!-- <template>
                        <el-checkbox v-model="checked"></el-checkbox>
                    </template> -->
                </div>
                <!-- <div class="de-cart-pay-text">全选</div> -->
                <div class="de-cart-pay-price">合计<label>￥</label><span>{{all_price}}</span></div>
                <div class="de-cart-pay-btn" @click="submit_order">结算</div>
            </div>
        </div>
        <div v-else class="mui-content" style="padding-top: 44px;">
            <div class="empty_cart">
                <img src="../mui/img/empty_cart.png">
                <span>购物车是空的</span>
            </div>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                goods_list: [],
                all_price: 0,
                api_host: de.api_host,
                // checked: true,
            },
            created: function (){
                // 验证是否登陆
                if (!de.auth_login()) {
                    de.href("../login.html");
                }
                this.get_car_list();
            },
            mounted: function (){

            },
            methods: {
                // 购物车商品列表
                get_car_list: function (){
                    var the = this;
                    var login = de.auth_login();
                    // 提交数据
                    axios.post(de.api.order_car, {token: login}).then(function (data){
                        var dd = data.data;
                        if (dd.code == 200) {
                            the.goods_list = dd.data;
                            the.all_price = dd.all_price;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 提交订单
                submit_order: function (){
                    de.href('./submit_order.html');
                },
                // 修改购物车商品
                save_car: function ( id , num , ori_num ){
                    var the = this;
                    var login = de.auth_login();

                    ori_num = parseInt(num) + parseInt(ori_num);
                    if (ori_num <= 0) {
                        alert('亲!最少选一个,如不想要,您可删除');
                        return false; 
                    }
                    // 打印数据
                    var obj = {token:login, id:id, goods_num:num};
                    console.log(obj);
                    // 提交数据
                    axios.post(de.api.order_addcar, {token:login, id:id, goods_num:num}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            the.get_car_list();
                            alert(dd.info); 
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 删除购物车中商品
                del_goods: function ( id , key , price ){
                    var the = this;
                    var login = de.auth_login();
                    // 提交数据
                    axios.post(de.api.order_delcar, {token: login, id: id}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            the.get_car_list();
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });

                }
            },
        });
    </script>
</body>

</html>